<template>
  <div>
    <button v-on:click="count++">{{count}}</button>
    <button v-on:click="remove">{{count}}</button>
    <hr>
    <a href="http://www.baidu.com" @click.prevent.stop='fn(4675)'>百度</a>
    <hr>
    <a href="http://www.baidu.com" @click.prevent>百度</a>
    <hr>
    <button @click="add(34)">{{count}}</button>
    <div class="father" @click="fn1">
      <div class="son" @click.stop="fn2"></div>
    </div>
    <input type="text" @keyup.esc="fn3">
    <hr>
   </div>
</template>
 
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      count:2,
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    add(a){
      this.count=this.count+a
    },
    remove(){
      this.count=0
    },
    fn(a){
     /*  e.preventDefault()
      e.stopPropagation() */
      console.log(a)
    },
    fn1(){
      console.log('点击了father')
    },
    fn2(){
      console.log('点击了son')
    },
    fn3(e){
      console.log(e.key)
    },
    
  }
};
</script>

<style scoped lang="less">
     .father{
      width: 100px;
      height: 100px;
      background-color: lightblue;
      display: flex;
      .son{
        width: 50px;
        height: 50px;
        background-color: pink;
      }
     }
</style>
